<template>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>条件类型管理</el-breadcrumb-item>
            </el-breadcrumb>
        <div>

        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>条件区域</el-breadcrumb-item>
            </el-breadcrumb>
            <table align="center">
                <tr>
                    <td  width="700" height="65">条件名称: <el-input class="TJMC" v-model="queryform.limitName" ></el-input></td>
                    <td  width="700" height="65">数据来源: <select class="select" v-model="queryform.limitSource">
                        <option>用户信息表</option>
                        <option>代办业务原表</option>
                    </select></td>
                </tr>
                <tr>
                    <td width="700" height="65">条件编码: <el-input class="TJMC" v-model="queryform.limitCode" ></el-input></td>
                    <td>条件类别: <select class="select" v-model="queryform.limitType">
                        <option>用户属性</option>
                        <option>基础属性</option>
                        <option>用户账务属性</option>
                        <option>代办业务属性</option>
                    </select></td>
                </tr>
            </table>
            </el-card>

            <el-card class="box-card">
                        <el-button type="primary" @click="query">查询</el-button>

                        <el-button type="primary" @click="dialogTableVisible = true">新增</el-button>
                        <el-dialog title="新增条件类型" :visible.sync="dialogTableVisible">
                            <el-form ref="form" :model="form" label-width="100px">
                                <el-row>
                                    <el-col :span="11">
                                        <el-form-item label="条件名称">
                                            <el-input v-model="form.tjmc"></el-input>
                                        </el-form-item>
                                    </el-col>
                                        <el-col :span="11">
                                            <el-form-item label="条件类别">
                                                <el-select v-model="form.tjlb"  placeholder="请选择" >
                                                    <el-option label="用户属性" value="用户属性" ></el-option>
                                                    <el-option label="基础数据" value="用户属性" ></el-option>
                                                    <el-option label="用户账务属性" value="用户账务属性" ></el-option>
                                                    <el-option label="代办业务属性" value="代办业务属性" ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                </el-row>

                                <el-row>
                                    <el-col :span="11">
                                        <el-form-item label="数据来源">
                                            <el-select v-model="form.sjly" placeholder="请选择" >
                                                <el-option label="用户属性表" value="用户属性表" ></el-option>
                                                <el-option label="代表业务表" value="代表业务表" ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-form-item label="条件编码">
                                            <el-input v-model="form.tjbm"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>


                                        <el-form-item label="数据到位时间">
                                            <el-input v-model="form.dwsj" ></el-input>
                                        </el-form-item>

                                <el-form-item label="业务大类">
                                <el-checkbox-group v-model="checkList">
                                    <el-checkbox label="放号"></el-checkbox>
                                    <el-checkbox label="业务受理"></el-checkbox>
                                    <el-checkbox label="缴费"></el-checkbox>
                                    <el-checkbox label="终端"></el-checkbox>
                                    <el-checkbox label="数据业务"></el-checkbox>
                                    <el-checkbox label="其他业务"></el-checkbox>
                                </el-checkbox-group>
                                </el-form-item>

                                <el-form-item label="逻辑符号">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox label=">"></el-checkbox>
                                        <el-checkbox label="<"></el-checkbox>
                                        <el-checkbox label="="></el-checkbox>
                                        <el-checkbox label=">="></el-checkbox>
                                        <el-checkbox label="<="></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="success" @click="add">立即创建</el-button>
                                    <el-button type="danger" @click="dialogFormVisible = false">取消</el-button>
                                </el-form-item>
                            </el-form>


                        </el-dialog>


                        <el-button type="warning" @click="empty">重置</el-button>

                        <el-button type="success" @click="exportData">
                            导出
                        </el-button>
            </el-card>
<!--            修改对话框-->
            <el-dialog width="400px" title="修改" :visible.sync="dialogFormEditVisible">
                <el-form :model="editform">
                    <el-form-item label="条件编码" >
                        <el-input v-model="editform.BM" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="条件名称" >
                        <el-input v-model="editform.MC" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="条件类别" >
                        <el-input v-model="editform.LB" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数据来源" >
                        <el-input v-model="editform.LY" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数据到位时间" >
                        <el-input v-model="editform.SJ" autocomplete="off"></el-input>
                    </el-form-item>

<!--                  -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="warning" @click="dialogFormEditVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDept">保 存</el-button>
                </div>
            </el-dialog>


        </div>

        <el-card>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>列表区域</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table
                :data="dislist"
                height="500"
                border
                style="width: 100%"
                id="export-table"
        >
            <el-table-column align="center"
                                prop="id"
                                label="id"
                                width="192">
            </el-table-column>
            <el-table-column align="center"
                    prop="limitCode"
                    label="条件编码"
                    width="192">
            </el-table-column>
            <el-table-column align="center"
                    prop="limitName"
                    label="条件名称"
                    width="192">
            </el-table-column>

            <el-table-column align="center"
                    prop="limitType"
                    label="条件类别"
                    width="192">
            </el-table-column>
            <el-table-column align="center"
                    prop="limitSource"
                    label="数据来源"
                    width="192">
            </el-table-column>
            <el-table-column align="center"
                    prop="limitTime"
                    label="数据到位时间"
                    width="192">
            </el-table-column>
            <el-table-column align="center"
                    prop="CZ"
                    label="操作"
                    width="205">
                <template slot-scope="scope">
                    <el-button type="primary"  class="edit"  icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                    <el-button type="danger" class="del"  icon="el-icon-delete" circle  @click="del(scope.row.id)"></el-button>
                </template>
            </el-table-column>
            </el-table>
            <div class="page">
                            <el-pagination
                    background
                    layout="prev, pager, next" :total="50"
                    @current-change="fengye($event)"
            >
            </el-pagination>
            总条数: {{zongji}}
            当前页数: {{yeshu}}/{{zongyeshu}}
            </div>
        </el-card>

        </div>

</template>

<script>
    import XLSX from 'xlsx'
    import FileSaver from 'file-saver'

    export default {
        name: "condition",
        data(){
         return{
             dialogTableVisible:false,
             dialogFormEditVisible:false,
             input:'',
             zongji:'55',
             yeshu:'',
             zongyeshu:'10',
             checkList:[],
             dislist:[],
             queryform: {
                 limitName:'',
                 limitSource:'',
                 limitCode:'',
                 limitType:'',
                 limitTime:'',

             },
             form: {
                 sjly:'',
                 tjbm:'',
                 tjlb:'',
                 dwsj:'',
                 tjmc:'',
             },

             editform:{
                 id:'',
                 BM:'',
                 LY:'',
                 LB:'',
                 SJ:'',
                 MC:'',
             },

         }
        },
        created() {
            this.$axios.get('api/limit/selectAll').then((response)=>{
                let result = response.data;
                console.log(result)
                this.dislist = result.data;
                console.log(this.dislist);
            })
        },
        methods:{
            getList(){
                this.$axios.get('api/limit/selectAll').then((response)=>{
                    let result = response.data;
                    console.log(result)
                    this.dislist = result.data;
                    console.log(this.dislist);
                })
            },
               del(id){
                   this.$axios.post('api/limit/deleteById',this.$qs.stringify({
                       id:id,
                   })).then((response)=>{
                       let result = response.data;
                       this.dislist = result.data;
                       this.getList();
                   })
               },
                query(){
                   this.$axios.post('api/limit/selectByName',{

                           limitName: this.queryform.limitName,
                           limitSource: this.queryform.limitSource,
                           limitCode: this.queryform.limitCode,
                           limitType: this.queryform.limitType,
                            limitTime: this.queryform.limitTime,

                   }).then((response)=>{
                       let result = response.data;
                       this.dislist = result.data;
                       console.log(this.dislist)
                   })
                },
            edit(obj){
                this.editform.id=obj.id;
                this.editform.BM=obj.limitCode;
                this.dialogFormEditVisible=true;
                this.editform.MC=obj.limitName;
                this.editform.LB=obj.limitType;
                this.editform.LY=obj.limitSource;
                this.editform.SJ=obj.limitTime;


            },
            saveDept(){
              this.$axios.post('/api/limit/updateById',
                  {
                      id:this.editform.id,
                      limitCode:this.editform.BM,
                      limitName:this.editform.MC,
                      limitType:this.editform.LB,
                      limitSource:this.editform.LY,
                      limitTime:this.editform.SJ,

                      })
                  .then((response)=>{
                      let result=response.data;
                      this.dislist=result.data;
                      this.dialogFormEditVisible=false;
                      this.getList();

                  })
            },
            add(){
                   this.$axios.post('api//limit/insert',{
                       limitCode:this.form.tjbm,
                       limitName:this.form.tjmc,
                       limitSource:this.form.sjly,
                       limitTime:this.form.dwsj,
                       limitType:this.form.tjlb,
                   }).then((response)=>{
                       let result=response.data;
                       this.dislist = result.data;
                       this.dialogTableVisible=false;
                       this.getList();
                   })
                },
            empty() {
                this.queryform.limitType = "";
                this.queryform.limitSource = "";
                this.queryform.limitCode = "";
                this.queryform.limitName = "";
            },
            fengye:function (e) {
                // console.log(e);
                this.yeshu=e;
                this.page=e;
                console.log(this.page)

            },

            exportData() {
                let wb = XLSX.utils.table_to_book(document.querySelector('#export-table'))
                let wbexport = XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: true,
                    type: 'array',
                })
                try {
                    FileSaver.saveAs(
                        new Blob([wbexport], { type: 'application/octet-stream' }),
                        '条件类型管理.xlsx'
                    )
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbexport)
                }
                return wbexport
            },




        },

    }
</script>

<style scoped>
    #CXJG{
        height: 50px;
        line-height: 50px;
        font-weight: bold;
    }
    .TJMC{
        width: 300px;
    }
    .box-card {
        margin-bottom: 10px;
    }
    .select{
        border: 1px solid #DCDFE6;
        width: 300px;
        height: 40px;
        outline: none;

    }
     .select option {
         height: 40px;
         line-height: 40px;
     }
    td{
        text-align:center;

    }
    .el-breadcrumb {
        margin-bottom: 10px;
    }
    .page {
        margin-top: 20px;
    }
     .el-button--primary{
        width: 100px;
        height: 40px;
        text-align: center;
        margin-left: 10px;
    }
    .el-button--success{
        width: 100px;
        height: 40px;
        text-align: center;
    }
    .el-button--warning{
        width: 100px;
        height: 40px;
        text-align: center;
        margin-left: 10px;
    }
    .el-button--danger{
        width: 100px;
        height: 40px;
        text-align: center;
    } 

    .el-table-column{
        text-align:center;
    }
    .edit{
        width: 40px;
        height: 40px;
        text-align: center;

    }
    .del{
        width: 40px;
        height: 40px;
        text-align: center;
    }


    .el-col {
        height: 50px;
        line-height: 50px;
    }


</style>